<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 雷达图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 准备用于显示图表的容器 -->
<div id="radarChart" style="width: 600px;height:400px;"></div>
<script>


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('radarChart'));

    var max_Y1 = 100;
    var max_Y2 = 200;

    // 指定图表的配置项和数据
    var option = {


        yAxis: [

            {
                type: "value",
                name: "户数", //坐标轴名称
                min: 0, //最小值
                max: max_Y1, //最大值
                splitNumber: 5, //坐标轴的分割段数
                interval: max_Y1 / 5, // 强制设置坐标轴分割间隔度(取本Y轴的最大值 max / 分割段数 splitNumber )
                splitLine: {
                    lineStyle: {
                        color: "#ad1", //刻度线颜色
                    },
                },
            },// Y轴1 户数


            {
                type: "value",
                name: "金额", //坐标轴名称
                min: 0, //最小值
                max: max_Y2, //最大值
                splitNumber: 5, //坐标轴的分割段数
                interval: max_Y2 / 5, // 强制设置坐标轴分割间隔度(取本Y轴的最大值 max / 分割段数 splitNumber )
                axisLabel: {
                    formatter: "{value}(万元)", //自定义Y轴刻度名称
                },
            }, // Y轴2 金额

        ],

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },


        legend: {// 两个柱形图，两个折线图
            data: ['柱状图1', '柱状图2', '折线图1','折线图2'],
            top:"top"
        },


        xAxis: {// X 轴
            type: 'category',
            data: ['分行A', '分行B', '分行C', '分行D', '分行E']
        },

        //数据集
        dataset: {
            // 每个维度的信息
            dimensions: [
                "product", // 默认product的值是X轴的刻度
                "柱状图1", //这5个是维度
                "柱状图2",
                "折线图1",
                "折线图2",
            ],
            // 维度和数据（以下三种数据结构都可以）
            source: [
                // ['product','正常请求数','错误响应数','慢响应数','非常慢响应数','平均响应时间'],//刻度+5个维度的值(这一组数据可以省略 那么他会自动对应到series的数据)
                ["分行A", 20, 10, 20, 30], //几个数组就代表有几次数据
                ["分行B", 55, 33, 11, 26],
                ["分行C", 54, 3, 33, 38],
                ["分行D", 52, 11, 46, 55],
                ["分行E", 46, 1, 66, 77]
            ],
        },

        series: [
            {
                name: "柱状图1",
                color: "#c7c8ff",
                type: "bar",
                stack: "one", // stack值相同的堆叠到一起
                yAxisIndex: 0,
            },
            {
                name: "柱状图2",
                color: "#5e5ff6",
                type: "bar",
                stack: "one",
                yAxisIndex: 0,
            },
            {
                name: "折线图1",
                color: "#FFEB3B",
                type: "line",
                smooth: true, // 平滑曲线
                lineStyle: {
                    width: 3,
                },
                yAxisIndex: 1, // 使用哪个Y轴的数据展示（多个 y轴的时候有用） 0  1
            },
            {
                name: "折线图2",
                color: "#007d7b",
                type: "line",
                smooth: true, // 平滑曲线
                lineStyle: {
                    width: 3,
                },
                yAxisIndex: 1, // 使用哪个Y轴的数据展示（多个 y轴的时候有用） 0  1
            },
        ]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
</body>
</html>